<script setup>
import { Sticky, Overlay, DatePicker, Popup } from 'vant'
import { Selection, Input } from '@/components/common/index'
// import {  payStatusList } from '@/enum/coin'
import { arrayToTime, timeToArray } from '@/utils/time.js'
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { userStore } from '@/store/user'
import { enumStore } from '@/store/enum'
import Utility from '@/utils/utility'
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const store = userStore()
const { supplier_pay_enable } = storeToRefs(store)
const navList = supplier_pay_enable.value
  ? [
      { name: '入账', type: 'enter' },
      { name: '提现', type: 'withdraw' },
      { name: '付款', type: 'pay' },
    ]
  : [
      { name: '入账', type: 'enter' },
      { name: '提现', type: 'withdraw' },
    ]
const show = ref(false) // 是否显示筛选框
const showTime = ref(false) // 是否显示日期选择
const currentDate = ref(Utility.getDateTime().split('-')) // 选中的日期 
let dateType = 'start'
// 筛选数据
const filterInfo = ref({
  currencyId: '',
  status: '',
  noticeTimeStartTime: '',
  noticeTimeEndTime: '',
  keyword: '',
})
const props = defineProps({
  active: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['change', 'search'])

function handleChangeType(item) {
  if (item.type === props.active) {
    return null
  }
  emit('change', item.type)
  hanldeReset()
}

// 格式化日期选择 数据
function formatter(type, option) {
  if (type === 'year') {
    option.text += '年'
  }
  if (type === 'month') {
    option.text += '月'
  }
  if (type === 'day') {
    option.text += '日'
  }
  return option
}

function hanldeTimeClick(type) {
  dateType = type
  if (dateType === 'start') {
    if (filterInfo.value.noticeTimeStartTime) {
      currentDate.value = timeToArray(filterInfo.value.noticeTimeStartTime)
    }
  } else {
    if (filterInfo.value.noticeTimeEndTime) {
      currentDate.value = timeToArray(filterInfo.value.noticeTimeEndTime)
    }
  }
  showTime.value = true
}

function hanldeDateConfirm({ selectedValues }) {
  if (dateType === 'start') {
    filterInfo.value.noticeTimeStartTime = arrayToTime(selectedValues)
  } else {
    filterInfo.value.noticeTimeEndTime = arrayToTime(selectedValues)
  }
  showTime.value = false
}

function hanldeReset() {
  filterInfo.value = {
    currencyId: '',
    status: '',
    noticeTimeStartTime: '',
    noticeTimeEndTime: '',
    keyword: '',
  }
}

function handleConfirm() {
  emit('search', filterInfo.value)
  show.value = false
}
const coinList = computed(() => {
  if (enumDslInfo.value.CurrencyType && enumDslInfo.value.CurrencyType.length) {
    return enumDslInfo.value.CurrencyType.map((_) => ({
      ..._,
      name: _.value + _.name,
    }))
  } else {
    return []
  }
})
const handleStatusRepeat = (list) => {
  let statusList = []
  list.forEach((v) => {
    if (statusList.length) {
      let _index = statusList.findIndex((_) => _.label === v.label)
      if (_index > -1) {
        statusList[_index].value = statusList[_index].value + ',' + v.value
      } else {
        statusList.push(v)
      }
    } else {
      statusList.push(v)
    }
  })
  console.log("handleStatusRepeat==",statusList);
  return statusList
}
const enterStatusList = computed(() => {
  if (
    enumDslInfo.value.IncomingAuditStatus &&
    enumDslInfo.value.IncomingAuditStatus.length
  ) {
    return handleStatusRepeat(enumDslInfo.value.IncomingAuditStatus)
  } else {
    return []
  }
})
// 交易列表
const DealStatusList = computed(() => {
  if (
    enumDslInfo.value.WithdrawStatus &&
    enumDslInfo.value.WithdrawStatus.length
  ) {
    return handleStatusRepeat(enumDslInfo.value.WithdrawStatus)
  } else {
    return []
  }
})
</script>
<template>
  <Sticky :offset-top="46">
    <div class="search-nav">
      <div
        v-for="(item, index) in navList"
        :key="index"
        :class="[
          'search-nav-item',
          'fz-16',
          item.type === props.active ? 'active-item' : '',
        ]"
        @click="handleChangeType(item)"
      >
        {{ item.name }}
      </div>
      <div class="filter-btn fz-14" @click="show = true">
        <i class="iconfont icon-shaixuanicon"></i>
        筛选
      </div>
    </div>
  </Sticky>
  <!-- 筛选项 -->
  <Overlay :show="show" z-index="99">
    <div class="filter-box">
      <i class="iconfont icon-danchuangguanbiicon" @click="show = false"></i>
      <div class="filter-box-title">筛选</div>
      <div class="select-title fz-14">币种</div>
      <Selection v-model:value="filterInfo.currencyId" :list="coinList" />
      <div class="select-title fz-14">状态</div>
      <Selection
        v-if="props.active === 'enter'"
        v-model:value="filterInfo.status"
        :list="enterStatusList"
      />
      <Selection
        v-else-if="props.active === 'withdraw'"
        v-model:value="filterInfo.status"
        :list="DealStatusList"
      />
      <Selection
        v-else
        v-model:value="filterInfo.status"
        :list="DealStatusList"
      />
      <div class="select-title fz-14">时间</div>
      <div class="time-box">
        <Selection
          disabled
          just-show
          :placeholder="filterInfo.noticeTimeStartTime || '开始时间'"
          @cover-click="hanldeTimeClick('start')"
        />
        <span class="line"></span>
        <Selection
          disabled
          just-show
          :placeholder="filterInfo.noticeTimeEndTime || '结束时间'"
          @cover-click="hanldeTimeClick('end')"
        />
      </div>
      <template v-if="props.active === 'enter'">
        <div class="select-title fz-14">关键词</div>
        <Input
          v-model:value="filterInfo.keyword"
          placeholder="付款人姓名/收款账户"
        />
      </template>
      <div class="control-box">
        <button @click="hanldeReset">重置</button>
        <button @click="handleConfirm">确认</button>
      </div>
    </div>
  </Overlay>
  <!-- 日期选择 -->
  <Popup v-model:show="showTime" round position="bottom">
    <date-picker
      v-model="currentDate"
      :formatter="formatter"
      @confirm="hanldeDateConfirm"
      title="选择日期"
      @cancel="showTime=false"
    />
  </Popup>
</template>

<style scoped lang="scss">
.search-nav {
  @include fh;
  height: 0.4rem;
  padding: 0 0.12rem;
  background: #fff;
  &-item {
    margin-right: 0.25rem;
  }
  .active-item {
    font-size: 0.18rem;
    color: #3f84f3;
    position: relative;
    font-family: PingFangSC-Medium, PingFang SC;
    &::before {
      content: '';
      position: absolute;
      bottom: -0.1rem;
      left: 0;
      @include wh(0.36rem, 0.03rem);
      background: #3f84f3;
    }
  }
  .filter-btn {
    margin-left: auto;
  }
}

.filter-box {
  position: absolute;
  top: 1.2rem;
  left: 0;
  right: 0;
  border-radius: 0.04rem;
  margin: 0 auto;
  width: 3.25rem;
  background: #fff;
  padding: 0.15rem 0.12rem 0.25rem;
  .icon-danchuangguanbiicon {
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
    font-size: 0.2rem;
  }
  &-title {
    text-align: center;
  }
  .select-title {
    margin: 0.16rem 0 0.1rem;
    color: #222;
  }
  .time-box {
    @include fh;
    .select-box {
      width: 1.3rem;
    }
    .line {
      @include wh(0.17rem, 1px);
      background: #cccccc;
      margin: 0 0.08rem;
    }
  }
  .control-box {
    @include fh;
    justify-content: space-between;
    margin-top: 0.3rem;
    button {
      @include wh(1.35rem, 0.4rem);
      border-radius: 0.2rem;
      border: none;
    }
    button:nth-of-type(1) {
      background: #f4f4f4;
      color: #666666;
    }
    button:nth-of-type(2) {
      background: #3f84f3;
      color: #fff;
    }
  }
}
</style>
